<template>
  <div>
    <v-speed-dial fixed bottom right v-model="fab">
      <template v-slot:activator>
        <v-btn
          v-model="fab"
          color="blue darken-2"
          dark
          fab
        >
          <v-icon v-if="fab">
            mdi-close
          </v-icon>
          <v-icon v-else>
            mdi-account-circle
          </v-icon>
        </v-btn>
      </template>
      <v-btn
        fab
        dark
        small
        color="indigo"
      >
        <v-icon>mdi-plus</v-icon>
      </v-btn>
      <v-btn
        fab
        dark
        small
        color="red"
      >
        <v-icon>mdi-delete</v-icon>
      </v-btn>
      <v-btn fab dark small color="green" @click="scrollToTop">
        <svg-icon icon="top"></svg-icon>
      </v-btn>
    </v-speed-dial>
  </div>
</template>

<script>
export default {
  name: 'ButtonGroup',

  data () {
    return {
      fab: false
    }
  },

  mounted () {

  },

  methods: {
    scrollToTop () {
      this.$vuetify.goTo(0)
    }
  }
}
</script>

<style lang="scss" scoped>
.svg-icon {
  color: #fff;
  font-size: 24px;
}
</style>
